<template>
  <div>
    <van-nav-bar
      title="酷安网注册"
      left-arrow
      @click-left="onClickLeft"
    > </van-nav-bar>
    <!-- 头像 -->
    <div class="touxiang">
      <van-image
        round
        width="2.5rem"
        height="2.5rem"
        src="https://img1.baidu.com/it/u=1703711924,229959213&fm=253&fmt=auto&app=120&f=PNG?w=192&h=192"
      />
    </div>
    <!-- 注册框 -->
    <div>
      <van-form>
        <van-cell-group class="inp">
          <!-- 手机号 -->
          <van-field
            v-model="phone"
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            left-icon="user-o"
            autocomplete="off"
          />
          <!-- 短信验证码 -->
          <van-field
            v-model="sms"
            center
            clearable
            label="短信验证码"
            left-icon="envelop-o"
            placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button
                size="small"
                type="primary"
                @click="getsms"
              >发送验证码</van-button>
            </template>
          </van-field>
          <!-- 密码 -->
          <van-field
            v-model="pwd"
            label="密码"
            type="password"
            placeholder="请输入密码"
            left-icon="closed-eye"
            name="pwd"
            autocomplete="off"
          />
          <!-- 确认密码 -->
          <van-field
            v-model="checkpwd"
            label="确认密码"
            type="password"
            placeholder="请确认密码"
            left-icon="closed-eye"
            name="pwd"
            autocomplete="off"
          />
        </van-cell-group>
        <div class="btn_box">
          <van-button
            type="default"
            block
            @click="register"
          >注册</van-button>
        </div>
        <div
          class="btn_box"
          native-type="submit"
        >
          <van-button
            type="info"
            block
            to="/login"
          >登录</van-button>
        </div>
        <div class="forget">
          <router-link to="/login">忘记密码</router-link>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "register",
  data() {
    return {
      phone: "",
      pwd: "",
      checkpwd: "",
      sms: "",
      Rphone: "",
      Rsms: "",
    };
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    validator(val) {
      return /^1(3|4|5|6|7|8|9)\d{9}$/.test(val);
    },
    CheckPwd(val) {
      if (val != this.pwd) {
        return false;
      }
    },
    // 注册
    register() {
      if (
        this.phone == "" ||
        this.pwd == "" ||
        this.checkpwd == "" ||
        this.sms == ""
      ) {
        this.$toast.fail("注册信息不能为空");
      } else if (this.checkpwd != this.pwd) {
        this.$toast.fail("两次密码不一致");
      } else if (this.phone != this.Rphone) {
        this.$toast.fail("该手机与注册手机号码不一致");
      } else if (this.sms != this.Rsms) {
        this.$toast.fail("请输入正确的验证码");
      } else {
        console.log(123);
        this.axios
          .post("apis/kuan_api/register.php", {
            user_name: this.phone,
            user_pwd: this.checkpwd,
          })
          .then((res) => {
            if (res.data.errorCode == 1) {
              this.$toast.success("注册成功");
              setTimeout(() => {
                this.$router.push("/login");
              }, 1500);
            }
          })
          .catch((err) => {
            console.error(err);
          });
      }
    },
    getsms() {
      let result = this.validator(this.phone);
      if (result) {
        this.axios
          .post("apis/kuan_api/sendMessageCode.php", {
            phone: this.phone,
          })
          .then((res) => {
            console.log(res.data);
            if (res.data.errorCode == -1) {
              this.$toast.fail(res.data.message);
            } else {
              this.Rphone = res.data.phone;
              this.Rsms = res.data.code;
              this.$toast.success("发送成功");
              setTimeout(() => {
                this.sms = res.data.code;
              }, 1500);
            }
          });
      } else {
        this.$toast.fail("请输入正确的手机号码");
      }
    },
  },
};
</script>

<style scoped>
.touxiang {
  padding: 85px 0px;
  text-align: center;
}
.btn_box {
  margin-top: 15px;
  padding: 0px 15px;
}
.forget {
  padding-top: 20px;
  padding-left: 25px;
}
a {
  color: blue;
  font-size: 15px;
}
</style>